import React, { useState, useEffect } from 'react';
import MobileOps from './MobileOps';
import PcOps from './PcOps';

const useMediaQuery = (query) => {
  const [matches, setMatches] = useState(window.matchMedia(query).matches);
  useEffect(() => {
    const listener = (event) => setMatches(event.matches);
    window.matchMedia(query).addListener(listener);
    return () => window.matchMedia(query).removeListener(listener);
  }, [query]);
  return matches;
};

const Home = () => {
  const isMobile = useMediaQuery('(max-width: 768px)');
  return (
    <>
      {isMobile ? <MobileOps /> : <PcOps />}
    </>
  );
};

export default Home